<script setup lang="ts">
import { ref, watch } from 'vue';

interface InfoConfig {
  title: string;
  value: number | string;
  unit?: string;
  trend?: 'down' | 'stable' | 'up';
  trendValue?: string;
  description?: string;
}

const props = defineProps<{
  config: InfoConfig;
}>();

const emit = defineEmits<{
  'update:config': [config: InfoConfig];
}>();

const localConfig = ref<InfoConfig>({ ...props.config });

watch(
  localConfig,
  (newVal) => {
    emit('update:config', newVal);
  },
  { deep: true },
);

const trendOptions = [
  { label: '上升', value: 'up' },
  { label: '下降', value: 'down' },
  { label: '持平', value: 'stable' },
];
</script>

<template>
  <div class="info-card-config">
    <el-form label-width="100px">
      <el-form-item label="标题">
        <el-input v-model="localConfig.title" placeholder="请输入标题" />
      </el-form-item>

      <el-form-item label="数值">
        <el-input v-model="localConfig.value" placeholder="请输入数值" />
      </el-form-item>

      <el-form-item label="单位">
        <el-input v-model="localConfig.unit" placeholder="请输入单位（可选）" />
      </el-form-item>

      <el-form-item label="趋势">
        <el-select v-model="localConfig.trend" placeholder="选择趋势">
          <el-option
            v-for="option in trendOptions"
            :key="option.value"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="趋势数值">
        <el-input
          v-model="localConfig.trendValue"
          placeholder="如：12%、100人等"
        />
      </el-form-item>

      <el-form-item label="描述">
        <el-input
          v-model="localConfig.description"
          placeholder="请输入描述信息（可选）"
        />
      </el-form-item>

      <el-form-item>
        <el-alert
          title="提示"
          description="信息卡片用于展示关键业务指标，支持显示趋势变化"
          type="info"
          show-icon
          :closable="false"
        />
      </el-form-item>
    </el-form>
  </div>
</template>
